<template>
  <div>
    <el-dialog title="踢回公海" :visible.sync="open" append-to-body>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="原因" prop="record">
              <el-select v-model="form.record" placeholder="请选择原因">
                <el-option v-for="dict in dict.type.reasons_for_business_reporting" :label="dict.label"
                           :value="'踢回公海：'+dict.label" :key="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {giveBackBusiness} from "../../../../api/crm/businessTrack";

  export default {
    name: "give-back",
    dicts: ['reasons_for_business_reporting',],
    props: {
      businessId: {type: [String, Number],},
    },
    data() {
      return {
        id: this.businessId,
        // 表单
        form: {},
        // 表单页面开关
        open: false,
        // 表单验证
        rules: {
          reason: [
            {required: true, message: '原因不能为空', trigger: 'change'}
          ],
          record: [
            {required: true, message: '备注不能为空', trigger: 'blur'}
          ],
        },
      }
    },
    watch: {
      businessId(newValue, oldValue) {
        this.id = newValue;
      },
    },
    created() {
      console.log(this.businessId);
    },
    methods: {
      // 确定表单
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.form.id = this.id;
            giveBackBusiness(this.id, this.form).then(() => {
              this.$message.success('操作成功！');
              this.$emit('success');
            }).catch(() => this.$message.error('操作失败！'));
            this.open = false;
          }
        })
      },
      // 清空表单
      resetForm() {
        this.form = {
          id: null,
          record: null,
        }
      },
    }
  }
</script>

<style scoped>

</style>
